<template>
	<view class="" v-if="bloggerList.length > 0">
		<image class="designbj" v-if="bloggerListimg"  :src="bloggerListimg.downimg" mode=""></image>
		<tn-nav-bar fixed alpha customBack>
			<view slot="back" class='tn-custom-nav-bar__back' @click="goBack">
				<text class='icon tn-icon-left'></text>
				<text class='icon tn-icon-home-capsule-fill'></text>
			</view>
		</tn-nav-bar>
		<swiper  class="poster_swiper" previous-margin="110rpx" circular :current="swiperIndex" next-margin="110rpx"
			@change="onSwiperChange">
			<swiper-item v-for="(item, index) of bloggerList" :key="index">
				<view class="goods_info_box" :class="{ active: swiperIndex == index }">
					<image class="goods_image" :src="item.downimg" mode="aspectFit"></image>
				</view>
			</swiper-item>
		</swiper>
		<view class="designbottom">
			<view class="designbottom-left" @click="toposter">
				开始设计
			</view>
			<view class="designbottom-right" @click="postfavorite">
				<!-- <text class='icon tn-icon-star'></text> -->
				<text class='icon' :class="favorite_start ? 'tn-icon-star-fill tn-color-blue':'tn-icon-star'"></text>
				
			</view>
			<view class="designbottom-right">
				<text class='icon tn-icon-share-triangle'></text>
			</view>
		</view>
	</view>
</template>

<script>
	import {getRecommendList} from '@/api/home/index.js'
	import {favorite,hasfavorite} from '@/api/poster/index.js'
	export default {
		data() {
			return {
				swiperIndex: 0,
				bloggerList:[],
				bloggerListimg:'',
				favorite_start:false
			}
		},
		onLoad(e) {
			this.swiperIndex = e.s
			this.bloggerList = JSON.parse(e.item)
			this.bloggerListimg = this.bloggerList[this.swiperIndex]
			
		},
		onShow() {
			this.gethasfavorite()
		},
		methods: {
			gethasfavorite(){
				hasfavorite({
					form:{
						id:this.bloggerListimg.id
					}
				}).then((ruselt) => {
					this.favorite_start = ruselt.data.hasfavorite
				})
			},
			toposter(item,index){
				uni.navigateTo({
					url: '/pages/Posterproject/poster/index?id=' + this.bloggerListimg.id,
				});
			},
			postfavorite(){
				favorite({
					form:{
						id:this.bloggerListimg.id
					}
				}).then((res) => {
					uni.showToast({
						title: res.message,
						duration: 2000,
						icon:'none'
					});
					this.gethasfavorite()
				})
			},
			goBack(){
				uni.switchTab({
					url: '/pages/index/index'
				});
			},
			onSwiperChange(e) {
				this.swiperIndex = e.detail.current
				this.bloggerListimg = this.bloggerList[this.swiperIndex]
				this.gethasfavorite()
			}
		}
	}
</script>

<style lang="scss" scoped>
	.designbottom{
		width: 100%;
		display: flex;
		margin-top: 100rpx;
		align-items: center;
		height: 100rpx;
		box-sizing: border-box;
		padding: 0 50rpx;
		z-index: 99;
		position: absolute;
		.designbottom-left{
			width: 400rpx;
			height: 80rpx;
			line-height: 80rpx;
			text-align: center;
			background-color: #000;
			border-radius: 50rpx;
			color: #fff;
			margin-right: 20rpx;
		}
		.designbottom-right{
			height: 80rpx;
			width: 80rpx;
			line-height: 80rpx;
			text-align: center;
			border-radius: 50%;
			background-color: #fff;
			margin-left: 20rpx;
		}
	}
	/* 胶囊*/
	.tn-custom-nav-bar__back {
		width: 100%;
		height: 100%;
		position: relative;
		display: flex;
		justify-content: space-evenly;
		align-items: center;
		box-sizing: border-box;
		background-color: rgba(0, 0, 0, 0.15);
		border-radius: 1000rpx;
		border: 1rpx solid rgba(255, 255, 255, 0.5);
		color: #FFFFFF;
		font-size: 18px;

		.icon {
			display: block;
			flex: 1;
			margin: auto;
			text-align: center;
		}

		&:before {
			content: " ";
			width: 1rpx;
			height: 110%;
			position: absolute;
			top: 22.5%;
			left: 0;
			right: 0;
			margin: auto;
			transform: scale(0.5);
			transform-origin: 0 0;
			pointer-events: none;
			box-sizing: border-box;
			opacity: 0.7;
			background-color: #FFFFFF;
		}
	}
	
	.designbj{
		position: fixed;
		width: 100%;
		height: 100%;
		filter: blur(80px);
	}

	.poster_swiper {
		height: 80vh;
		width: 100%;
		padding-top: 100rpx;

		swiper-item {
			box-sizing: border-box;
			display: flex;
			align-items: center;

			.goods_info_box {
				width: 100%;
				height: 100%;
				transform: scale(0.88);
				transition: all 0.4s;
				position: relative;
				overflow: hidden;

				&.active {
					transform: scale(1);
				}

				.goods_image {
					width: 100%;
					height: 100%;
				}
			}
		}
	}

	.share_save_box {
		position: fixed;
		bottom: calc((100vh - 950rpx - 240rpx) / 4);
		left: 0;
		z-index: 6;
		width: 100%;
		display: flex;
		justify-content: space-around;

		button {
			display: flex;
			flex-direction: column;
			align-items: center;
			background-color: transparent;

			image {
				width: 60rpx;
				height: 60rpx;
			}

			text {
				font-size: 24rpx;
				color: #333333;
			}
		}
	}

	.h5_press_save {
		background-color: #000;
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		display: flex;
		align-items: center;
		z-index: 100;

		image {
			width: 100%;
		}

		.download {
			font-size: 24rpx;
			color: #ffffff;
			background-color: rgba(0, 0, 0, 0.5);
			display: flex;
			align-items: center;
			flex-direction: row;
			justify-content: center;
			position: absolute;
			padding: 5rpx 30rpx;
			border-radius: 40rpx;
			bottom: 30rpx;
			left: 50%;
			transform: translateX(-50%);

		}
	}
</style>